<template>
    <div id="container">
        <div class="centerit">
            <div class="chat-container">
                <aside>
                    <!-- 新建对话 -->
                    <div class="top-bar">
                        <div class="menu-burger-container">
                            <div class="menu-burger"></div>
                        </div>
                        <div class="new-conversation">新建对话</div>
                    </div>

                    <!-- 聊天列表 -->
                    <div class="conversations">
                        <div v-for="(item, key) in userlist" :class="item.id == active ? 'thread active' : 'thread'">
                            <div class="details">
                                <div class="user-head online">
                                    <img :src="item.avatar" />
                                </div>
                                <div class="user-name">{{item.nickname}}</div>
                                <div class="last-message">{{item.content}}</div>
                            </div>

                            <div :class="item.id == active ? 'last new' : 'last'">{{item.time}}</div>
                        </div>
                    </div>
                </aside>

                <main>
                    <!-- 聊天头部 -->
                    <div class="top-bar top-chat">
                        <div class="user-info">
                            <div class="user-head">
                                <img src="/develop/chat/1.png">
                            </div>
                            <div class="name">小强</div>
                            <div class="status online"></div>
                        </div>
                        <div class="buttons">
                            <div class="call">
                                <van-icon name="phone-o" size="30" />
                            </div>
                        </div>
                    </div>

                    <!-- 聊天框 -->
                    <div class="messages" id="messages">
                        <div class="date-split">以前或更早以前</div>

                        <div class="message">
                            <div class="user-head">
                                <img src="/develop/chat/2.png">
                            </div>
                            <div class="content">我已经更新了网站内容，菲奥娜，希望一切都好吗？请告诉我还有什么变化</div>
                        </div>
                        <div class="message fromme">
                            <div class="user-head">
                                <img src="/develop/chat/1.png">
                            </div>
                            <div class="content">啊！太好了。我现在得走了，明天我会赶上你的。</div>
                        </div>
                        <div class="message">
                            <div class="user-head">
                                <img src="/develop/chat/2.png">
                            </div>
                            <div class="content">不用担心，我很高兴你快乐！</div>
                        </div>
                        <div class="message">
                            <div class="user-head">
                                <img src="/develop/chat/2.png">
                            </div>
                            <div class="content">当然，等会儿再跟你说。</div>
                        </div>
                        <div class="date-split">今日</div>
                        <div class="message fromme">
                            <div class="user-head">
                                <img src="/develop/chat/1.png">
                            </div>
                            <div class="content">你能帮我检查一下照片吗？</div>
                        </div>
                        <div class="message">
                            <div class="user-head">
                                <img src="/develop/chat/2.png">
                            </div>
                            <div class="content">我已经做了，我现在就把演示稿整理好。</div>
                        </div>

                        <div class="message fromme">
                            <div class="user-head">
                                <img src="/develop/chat/1.png">
                            </div>
                            <div class="content">太棒了，谢谢。我期待着早上见到你。</div>
                        </div>
                    </div>

                    <!-- 发送 -->
                    <div class="bottom-bar">
                        <textarea class="msg-input" placeholder="发送信息"></textarea>
                        <div class="send-button">
                            <van-icon name="guide-o" size="30" color="#fff" />
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div>
</template>

<script setup>
    const { proxy } = getCurrentInstance();

    let active = ref(1)
    
    let userlist = ref([
        {id: 1, nickname: '张三', avatar: '/develop/chat/1.png', content: '是的，演讲安排在明天，你能做吗', time: '12:32'},
        {id: 2, nickname: '李四', avatar: '/develop/chat/2.png', content: '是的，演讲安排在明天，你能做吗', time: '12:32'},
        {id: 3, nickname: '小敏', avatar: '/develop/chat/3.png', content: '是的，演讲安排在明天，你能做吗', time: '12:32'},
    ])
</script>


<style scoped>
    @import url('/develop/chat/chat.css');
</style>